<template>
  <h1 ref="title">App</h1>
  <p>{{ count }}</p>
  <button @click="handleClick">按钮</button>
  <p>{{ person.name }}</p>
  <p>{{ person.age }}</p>
  <button @click="setAge">更新age</button>

  <Child :count="count" @setCount="handleClick" ref="child" />
</template>

<script lang="ts">
import {
  ref,
  reactive,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import Child from "./Child.vue";

export default {
  name: "App",
  // 组合式API / Composition API
  // data / methods / watch / computed / 生命周期函数 都在 setup 中完成
  setup() {
    // 相当于beforeCreate和created
    // const count = ref<number>(0);
    // 定义单个响应式数据
    // ref定义的数据，如果在模板页面中使用，就直接用
    // 如果在js中使用，需要xxx.value去操作
    /******************* yyy功能 ***********************/
    const count = ref(0); // 普通数据使用ref定义，表单项数据使用reactive定义

    // 定义methods
    const handleClick = () => {
      count.value++;
      // 可以直接赋值
      // count.value = 12
    };

    watch(
      count,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      {
        immediate: true,
        // deep: true
      }
    );

    // 只读的计算属性
    const times = computed(() => {
      return count.value + "次";
    });
    // 可读可写的计算属性
    const xxx = computed({
      get() {},
      set(val) {},
    });

    // 定义一个数据，数据名称和ref标识名称必须一致
    // 数据要暴露出去，将来数据就能得到DOM元素或组件实例对象
    const title = ref();
    const child = ref();

    // console.log(title.value, child.value); // undefined undefined
    // console.log(title, child);

    // 生命周期
    onBeforeUnmount(() => {
      console.log("beforeUnmount");
    });
    onMounted(() => {
      console.log("mounted111");
    });
    onMounted(() => {
      console.log("mounted222");
    });
    onMounted(() => {
      console.log("mounted333");
      console.log(title.value, child.value);
    });

    /******************* xxx功能 ***********************/
    // 定义多个响应式数据
    // reactive定义的数据不能直接赋值
    const person = reactive({
      name: "jack",
      age: 18,
      list: [],
    });

    console.log(person);

    watch(
      () => person.age,
      (newVal, oldVal) => {
        console.log(newVal, oldVal);
      },
      {
        immediate: true,
        // deep: true
      }
    );

    const setAge = () => {
      person.age++;
    };

    // console.log(this); // undefined setup不能使用this

    // setup暴露的内容，模板页面可以直接访问使用
    return {
      count,
      handleClick,
      person,
      setAge,
      times,
      title,
      child,
    };
  },
  components: {
    Child,
  },
};
</script>

<style scoped></style>
